<!DOCTYPE html>
<html>
<!-- Head -->
<head>
    <title>注册表单</title>
    <!-- Meta-Tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- //Meta-Tags -->
    <!-- Style -->
    <link rel="stylesheet" href="../static/css/common.css" type="text/css" media="all">
</head>
<body>
<style type="text/css">
    .errorColor {border-color: red;
    }
    .okColor{
        border-color: green;
    }
</style>
<h1>XBiaoShop</h1>
<div class="container w3layouts agileits pr">
    <a href="login.html" class="back"></a>
    <div class="register w3layouts agileits" id="registerInfo">
        <h2>欢 迎 注 册</h2>
        <form action="#" method="post">
            <input type="text" Name="Name" placeholder="用户名" required="" v-model="registerInfo.username" @mouseleave="checkUserName()" id="input1">
            <input type="email" Name="Email" placeholder="邮箱" required="" v-model="registerInfo.email" @mouseleave="checkEmail()" id="input2">
            <input type="password" Name="Password" placeholder="密码" required="" v-model="registerInfo.password">
            <input type="password" Name="Password1" placeholder="确认密码" required="" v-model="registerInfo.password1" @mouseleave="checkPassWord()">
        </form>
        <div class="send-button w3layouts agileits">
            <input type="submit" value="免费注册" @click="register()">
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="footer w3layouts agileits">
    <p>Copyright &copy; 2020.XB All rights reserved.</p>
</div>
</body>

<script src="../static/js/jquery-2.2.3.min.js"></script>
<script src="/static/js/vue.js"></script>

<script src="/static/js/axios.js"></script>
<script src="/static/js/layer.js"></script>
<script src="/static/js/shop/register.js"></script>
<script>

//    $("#input1").css("border-color","red","border","3px")
//    $("#input2").css("border-color","red","border","3px")
</script>

</html>